<template>
	<view class="artive-container">
		<view 
			class=""
			v-for="(item,index) in articleList"
			:key="item._id"
		>
			<view class="article" @click="goArticle(item)">
				<h2>{{item.title}}</h2>
				<h5>[{{item.dynasty}}]{{item.author}}</h5>
				<p>{{item.article[0]}}{{item.article[1]}}{{item.article[2]}}{{item.article[3]}}</p>
			</view>
		</view>
		<view class="is-show" v-if="isShow">
			请稍等. . .
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex';
	export default {
		name:"Article",
		data() {
			return {
				articleList:[],
				isShow:false
			};
		},
		props:{
			item:{
				type:String,
				default:'全部'
			},
			data:Array
		},
		created() {
			this.getArticleList();
			// setTimeout(function(){
			// 	this.$forceUpdate();
			// },1000);
			this._getArticleList();
		},
		methods:{
			getArticleList(){
				// if(this.item==="全部"){
				// 	this.articleList=this.data;
				// 	return;
				// }else{
					for(let i=0;i<this.data.length;i++){
						if(this.item==this.data[i].dynasty){
							this.articleList.push(this.data[i]);
						}
					}
					
				// }
				// if(this.articleList.length===0){
				// 	this.articleList=this.data
				// }
				if(this.item=='记录'){
					this.articleList=this.data;
				}
			},
			async _getArticleList(){
				if(this.item==="全部"){
					let {data} = await this.$http.get_acticle();
					this.articleList=data
				}
			},
			async goArticle(item){
				const _id = item._id;
				// console.log(_id)
				if(this.userInfo==null){
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}else{
					await this.$http.set_user_like({userId:this.userInfo._id,articleId:_id})
					// if(this.userInfo.like_article.indexOf(_id)==-1){
					// 	this.userInfo.like_article.push(_id);
					// }
					// console.log(this.userInfo)
					// console.log(_id)
					this.$emit('getUserLike');
					uni.navigateTo({
						url:`../../pages/article/article?params=${JSON.stringify(_id)}`
					})
				}
				
			},
		},
		computed:{
			...mapState(['userInfo'])
		}
	}
</script>
<style scoped lang="scss">
	@import './css/Article.scss';
</style>